import React from 'react'

function Welcome(){
    return(
        <>
            <h1>欢迎使用React</h1>
        </>
    )
}

export default function UseFun() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState<number | string>('')
    const [info, setInfo] = React.useState<string[]>([])
    const myRef = React.useRef<HTMLDivElement>(null)
    const myRefButton = React.useRef<HTMLButtonElement>(null)

    React.useEffect(() => {
        console.log('useEffect',myRef.current?.innerHTML, myRefButton.current!.innerHTML)
        //非空断言 !.（慎用，当控制台不报错但实际运行时可能会报错）  //可选链断言 ?.（类型保护）
        return () => {  }

    }, [])
    console.log('useEffect',myRef.current?.innerHTML)
    // console.log('useEffect', myRefButton.current!.innerHTML) // 报错
  return (
    <div>   
      use 函数和 ts的配置
      <div ref={myRef}>{count}</div>
      <button onClick={() => setCount(count + 1)} ref={myRefButton}>点击</button>
      <Welcome />
    </div>
  )
}
